<template>
<el-button color="#626aef" :dark="isDark" plain icon="Upload" @click="handleUP"
    >导入</el-button
  >
    <el-tooltip class="item" effect="dark" content="刷新" placement="top">
    <el-button circle icon="Refresh" @click="update" />
  </el-tooltip>
    <el-table
      :data="OkrList"
      border
    style="width: 95%; margin: 20px auto; border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
    :header-cell-style="{
      background: '#95d475 !important',
      color: '#ffffff',
      border: 'none !important',
      textAlign: 'center',
    }"
    :span-method="(value) => rowSpanRulesHandler(value, OkrList)"
    >
    <el-table-column prop="assessorName" label="评分人" width="80" />
      <el-table-column prop="target" label="目标" width="180" />
      <el-table-column prop="totalScore" label="O分值" width="80" />
      <el-table-column prop="keyResult" label="关键结果" />
      <el-table-column prop="keyWeight" label="KR权重" width="80"/>
      <el-table-column prop="name" label="责任人" width="100"/>
      <el-table-column prop="ins" label="考核类型" width="150"/>
	  <el-table-column prop="createTime" label="创建时间" width="150"/>
      <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
    </el-table>
    <pagination
    class="pagination"
    v-show="OkrListPage.total > 0"
    :total="OkrListPage.total"
    v-model:page="PageForm.page"
    v-model:limit="OkrListPage.size"
    @pagination="handlePagination"
  />
  <UploadExcel
        v-model="upload.open"
        :title="upload.upLoadTitle"
        :url="importUrl"
        :tipShow="true"
        @onSuccess="onSuccess"
        @onDownTemplate="onDownTemplate"
      ></UploadExcel>
</template>

<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import {getOkrRulePage,deleteOkrRule} from '@/api/okr'
import { ElMessage } from 'element-plus'
import {getOkrTemplate} from "@/api/template"
import UploadExcel from "@/components/SendAndDownload/index";

const PageForm = ref({
  page: 1,
  page_size: 10,
});
const OkrListPage = ref([]);
const OkrList = ref([]);
onBeforeMount(() => {
  getOkrRulePage(PageForm.value).then((data) => {
    OkrListPage.value = data.data;
    OkrList.value = data.data.records;
  });
});
watch(
  OkrList,
  (newVal) => {
    
  },
  { deep: true }
);
const handlePagination=(value)=>{
  getOkrRulePage(value).then((data) => {
    OkrListPage.value = data.data;
    OkrList.value = data.data.records;
  });
}

const importUrl = ref('/OkrRule/upload');
const upload = ref({
  open: false,
  upLoadTitle: "okr考核上传",
});
const onSuccess = (res) => {
  getOkrRulePage(PageForm.value).then((data) => {
    OkrListPage.value = data.data;
    OkrList.value = data.data.records;
  });
  upload.value.open = false;
};
const handleUP = () => {
  upload.value.open = true;
};
const onDownTemplate = () => {
  getOkrTemplate()
};

const handleDelete = (index, row) => {
  deleteOkrRule({id:row.okrId}).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      update();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

const close = () => {
  dialogFormVisible.value = false;
};
const update = () => {
  getOkrRulePage(PageForm.value).then((data) => {
    OkrListPage.value = data.data;
    OkrList.value = data.data.records;
  });
};

const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
  let start = index;
  let multCompare = true;

  while (start < tableData.length && multCompare) {
    start++;
    count++;
    if (start <= tableData.length - 1)
      multCompare = row.okrId === tableData[start].okrId;
    else multCompare = row.okrId === tableData[start - 1].okrId;
  }
  start--;

  if (start < tableData.length) {
    tableData[index][`${compareAttr}_count`] = count; 
  }

  if (index > 0 && count + 1 === tableData[index - 1][`${compareAttr}_count`]) {
    return [0, 0];
  }
  return [count, 1];
};

const columns = [
  "assessorName",
  "name",
  "target1",
  "target2",
  "state",
  "updateTime",
  "ins",
  "operate",
];
const rowSpanRulesHandler = ({ row, column, rowIndex, columnIndex }, data) => {
  if (
    columns[columnIndex] === "assessorName" ||
    columns[columnIndex] === "name" ||
    columns[columnIndex] === "target1" ||
    columns[columnIndex] === "ins" ||
    columns[columnIndex] === "operate"
  ) {
    const r = compareSingleAttrReturnColSpan(row, "emp_id", rowIndex, data);
    return r;
  }
};
</script>
<style lang="scss" scoped>
.chapter{
    width: 300px;
    height: 300px;
    background-image: url("@/assets/chapter.png");
    background-size: contain;
    position: absolute;
    top: 160px;
    right: 50px;
}
:deep(.my-label) {
  background:#b3e19d !important;
  color: #fff !important;
}
:deep(.my-content) {
  background:#b3e19d !important;
  color: #fff !important;
}
</style>
